<template>
	<div class="app-mob-view-toolbar mob-toolbar-top">
		<template v-for="item in items" :key="item.name">
			<ToolbarItem
				v-if="item.itemType != 'ITEMS'"
				:item="item"
				@item-click="handleToolbarItemClick"
			>
			</ToolbarItem>
			<template v-else>
				<van-popover :placement="position" v-model:show="show">
					<template #reference>
						<ToolbarItem :item="item" />
					</template>
					<ToolbarGroups
						:items="item.items"
						@item-click="handleToolbarItemClick"
					></ToolbarGroups>
				</van-popover>
			</template>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { toolbarPositionProps } from '../toolbar';
import ToolbarItem from './toolbar-item.vue';
import ToolbarGroups from './toolbar-groups.vue';
const props = defineProps(toolbarPositionProps);
const emit = defineEmits(['itemClick']);
const show = ref(false);
const handleToolbarItemClick = (tag: string, event: any, logic: any) => {
	show.value = false;
	emit('itemClick', tag, event, logic);
};
</script>
